<!-- 逻辑代码块-->
<script setup lang="ts">
import { ref } from 'vue'
// 图片显示状态
const showTxt = ref(false)

const age = ref(3)
</script>

<!-- 结构块:-->
<template>
  <div>
    <!-- 使用v-show控制文字的显示隐藏 -->
    <button @click="showTxt = !showTxt">显示文字</button>
    <p v-show="showTxt">我是文字v-show</p>
    <!-- v-show的本质是在页面中实时修改标签的display属性 -->

    <!-- 使用v-if控制文字的显示隐藏 -->
    <p v-if="showTxt">我是文字v-if</p>
    <!-- v-if的本质是把标签从页面中移除，再把标签重新渲染到页面中，比较耗费性能 -->

    <!-- v-else的用法 -->
    <button @click="age++">年龄：{{ age }}</button>
    <p v-if="age < 5">玩泥巴</p>
    <!-- v-else-if 和 v-else 不能单独使用-->
    <p v-else-if="age >= 5 && age < 18">去网吧</p>
    <p v-else>入党</p>
  </div>
</template>

<!-- 样式块-->
<style scoped></style>
